<template>
  <PageLayout title="八字排盘" fixed shadow :content-padding="false">
    <div class="bazi-form">
      <!-- 当前时间八字信息 -->
    <div class="current-bazi">
      <!-- 标题区 -->
      <div class="bazi-header">
        <div class="title-group">
          <h3 class="bazi-title">当前时间</h3>
          <span class="time-info">{{ getCurrentShichen() }}：{{ currentTimeDisplay }}</span>
        </div>
        <button type="button" class="instant-btn" @click="handleInstantChart">即时排盘</button>
      </div>

      <!-- 八字信息 -->
      <div class="bazi-content">
        <div class="content-row">
          <!-- 四柱八字 -->
          <div class="bazi-pillars">
            <div class="pillar-group">
              <span class="pillar-label">年柱</span>
              <div class="pillar-chars">
                <span class="gan">{{ getYearStem() }}</span>
                <span class="zhi">{{ getYearBranch() }}</span>
              </div>
            </div>
            <div class="pillar-group">
              <span class="pillar-label">月柱</span>
              <div class="pillar-chars">
                <span class="gan">{{ getMonthStem() }}</span>
                <span class="zhi">{{ getMonthBranch() }}</span>
              </div>
            </div>
            <div class="pillar-group">
              <span class="pillar-label">日柱</span>
              <div class="pillar-chars">
                <span class="gan">{{ getDayStem() }}</span>
                <span class="zhi">{{ getDayBranch() }}</span>
              </div>
            </div>
            <div class="pillar-group">
              <span class="pillar-label">时柱</span>
              <div class="pillar-chars">
                <span class="gan">{{ getHourStem() }}</span>
                <span class="zhi">{{ getHourBranch() }}</span>
              </div>
            </div>
          </div>
          
          <!-- 日期信息 -->
          <div class="date-info">
            <div class="date-item">
              <span class="date-label">公历</span>
              <span class="date-value">{{ getGregorianDateOnly() }}</span>
            </div>
            <div class="date-item">
              <span class="date-label">农历</span>
              <span class="date-value">{{ getLunarText() }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="bazi-form__content">

      <form @submit.prevent="onSubmit" class="form-body">
        <!-- 姓名和性别在一行 -->
        <div class="form-row">
          <input v-model="formData.name" type="text" placeholder="请输入姓名（可选）" class="form-input" />
          <div class="gender-selector">
            <button type="button" class="gender-btn" :class="{ 'gender-btn--active': formData.gender === 1 }"
              @click="formData.gender = 1">
              男
            </button>
            <button type="button" class="gender-btn" :class="{ 'gender-btn--active': formData.gender === 0 }"
              @click="formData.gender = 0">
              女
            </button>
          </div>
        </div>

        <!-- 出生时间 -->
        <div class="form-field">
          <div class="datetime-selector" @click="openDateTimePicker(currentDateTimeType)">
            <span class="datetime-display">{{ displayDateTime || formData.datetime || '请选择出生时间' }}</span>
            <span class="datetime-arrow">▼</span>
          </div>
        </div>

        <!-- 出生地区 -->
        <div class="form-field">
          <div class="region-selector" @click="showRegionPicker = true">
            <span class="region-display">{{ selectedRegionText || '未知地 北京时间--' }}</span>
            <span class="region-arrow">▼</span>
          </div>
        </div>

        <!-- 高级选项 -->
        <div class="form-section">
          <div class="switch-item">
            <div class="switch-info">
              <span class="switch-desc">早晚子时支持</span>
            </div>
            <van-switch v-model="formData.enableZiShiSupport" size="20px" />
          </div>
        </div>

        <!-- 提交按钮 -->
        <div class="form-actions">
          <button type="submit" class="submit-btn" :disabled="loading">
            {{ loading ? '计算中...' : '开始排盘' }}
          </button>
        </div>
      </form>
    </div>

    <!-- 日期时间选择弹窗 -->
    <BaziDateTimePicker 
      v-model="showDateTimePicker" 
      :date-type="currentDateTimeType" 
      :default-date-time="formData.datetime"
      @confirm="handleDateTimeConfirm" 
    />

    <!-- 区域选择弹窗 -->
    <CityPicker 
      v-model="showRegionPicker" 
      :default-region="selectedRegionData ? {
        type: selectedRegionData.type,
        provinceId: selectedRegionData.provinceId,
        cityId: selectedRegionData.cityId,
        districtId: selectedRegionData.districtId,
        country: selectedRegionData.country,
        region: selectedRegionData.region
      } : undefined"
      @confirm="handleRegionConfirm" 
    />
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { baziApi, type BaziRequest } from '@/api/bazi'
import BaziDateTimePicker from '@/components/bazi-picker/bazi-date-time-picker.vue'
import CityPicker from '@/components/bazi-picker/city-picker.vue'
import PageLayout from '@/components/PageLayout.vue'
import { SolarTime, ChildLimit, Gender } from '@/components/bazi-picker/bazi-calculation-core'

// 获取默认出生时间 - 年份1990，其他时间使用当前时间
const getDefaultBirthDateTime = () => {
  const now = new Date()
  const year = 1990 // 默认年份设为1990
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 表单数据
const formData = reactive<BaziRequest>({
  datetime: getDefaultBirthDateTime(), // 设置默认出生时间为1990年
  gender: 1,
  name: '',
  longitude: undefined,
  latitude: undefined,
  enableZiShiSupport: false // 默认关闭
})

// 状态管理
const loading = ref(false)
const currentBaziData = ref<any>(null)
const currentBaziLoading = ref(false)

// 时钟相关
const currentTime = ref('')
const currentDate = ref('')
const currentTimeDisplay = ref('')

// 日期时间选择相关状态
const showDateTimePicker = ref(false)
const currentDateTimeType = ref<'solar' | 'lunar' | 'sizhu'>('solar')
const displayDateTime = ref('') // 用于显示的日期时间文本，初始化为空
const selectedDateTimeData = ref<{ solar: string; lunar: string; eightChar: string; dateType: 'solar' | 'lunar' | 'sizhu' } | null>(null) // 保存完整的选择器返回对象

// 打开日期时间选择器
const openDateTimePicker = (type: 'solar' | 'lunar' | 'sizhu') => {
  currentDateTimeType.value = type
  showDateTimePicker.value = true
}

// 区域选择相关状态
const showRegionPicker = ref(false)
const selectedRegionText = ref('')
const selectedRegionData = ref<{
  type: 'domestic' | 'overseas'
  provinceId?: string
  cityId?: string
  districtId?: string
  provinceName?: string
  cityName?: string
  districtName?: string
  country?: string
  region?: string
  zone?: number
  lng?: number
  lat?: number
} | null>(null)

// 路由
const router = useRouter()

// 获取当前时间八字信息
const getCurrentBazi = async () => {
  currentBaziLoading.value = true
  try {
    const now = new Date()
    
    // 创建 SolarTime 对象
    const solarTime = SolarTime.fromYmdHms(
      now.getFullYear(),
      now.getMonth() + 1,
      now.getDate(),
      now.getHours(),
      now.getMinutes(),
      now.getSeconds()
    )
    
    // 使用 ChildLimit 获取八字
    const childLimit = ChildLimit.fromSolarTime(solarTime, Gender.MAN, true)
    const eightChar = childLimit.getEightChar()
    
    // 获取四柱信息
    const yearPillar = eightChar.getYear()
    const monthPillar = eightChar.getMonth()
    const dayPillar = eightChar.getDay()
    const hourPillar = eightChar.getHour()
    
    // 获取农历信息
    const solarDay = solarTime.getSolarDay()
    const lunarDay = solarDay.getLunarDay()
    const lunarMonth = lunarDay.getLunarMonth()
    const lunarYear = lunarMonth.getLunarYear()
    
    // 格式化公历日期
    const gregorianText = `${now.getFullYear()}年${String(now.getMonth() + 1).padStart(2, '0')}月${String(now.getDate()).padStart(2, '0')}日 ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
    
    // 格式化农历日期
    const lunarText = `${lunarYear.getName()}年 ${lunarMonth.getName()}月${lunarDay.getName()}`
    
    // 构建返回数据格式（与后端 API 一致）
    currentBaziData.value = {
      title: '当前时间八字',
      currentTime: {
        gregorian: gregorianText,
        lunar: lunarText,
        time: `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`,
        timeHour: now.getHours()
      },
      bazi: {
        year: {
          stem: yearPillar.getHeavenStem().getName(),
          branch: yearPillar.getEarthBranch().getName()
        },
        month: {
          stem: monthPillar.getHeavenStem().getName(),
          branch: monthPillar.getEarthBranch().getName()
        },
        day: {
          stem: dayPillar.getHeavenStem().getName(),
          branch: dayPillar.getEarthBranch().getName()
        },
        hour: {
          stem: hourPillar.getHeavenStem().getName(),
          branch: hourPillar.getEarthBranch().getName()
        }
      }
    }
  } catch (error) {
    console.error('获取当前八字失败:', error)
    showToast('获取当前八字失败')
  } finally {
    currentBaziLoading.value = false
  }
}

// 刷新当前八字
const refreshCurrentBazi = () => {
  getCurrentBazi()
}

// 处理日期时间选择确认
const handleDateTimeConfirm = (result: { solar: string; lunar: string; eightChar: string; dateType: 'solar' | 'lunar' | 'sizhu' }) => {
  console.log('DateTime confirm received:', result)
  
  // 保存完整的选择器返回对象
  selectedDateTimeData.value = result
  
  // 更新当前日期类型
  currentDateTimeType.value = result.dateType
  
  // 根据 dateType 显示对应的日期格式
  switch (result.dateType) {
    case 'solar':
      // 公历模式：显示公历日期
      formData.datetime = result.solar
      displayDateTime.value = result.solar
      break
    case 'lunar':
      // 农历模式：显示农历日期，但实际存储公历日期用于计算
      formData.datetime = result.solar
      displayDateTime.value = result.lunar || result.solar
      break
    case 'sizhu':
      // 四柱模式：显示四柱信息，但实际存储公历日期用于计算
      formData.datetime = result.solar
      displayDateTime.value = result.eightChar || result.solar
      break
    default:
      formData.datetime = result.solar
      displayDateTime.value = result.solar
  }
}

// 处理区域选择确认
const handleRegionConfirm = (result: {
  type: 'domestic' | 'overseas'
  provinceId?: string
  cityId?: string
  districtId?: string
  provinceName?: string
  cityName?: string
  districtName?: string
  country?: string
  region?: string
  zone?: number
  lng?: number
  lat?: number
}) => {
  console.log('Region confirm received:', result)
  
  // 保存完整的区域数据
  selectedRegionData.value = result
  
  // 更新经纬度（只使用单独的lat/lng字段）
  if (result.lng !== undefined && result.lat !== undefined) {
    formData.longitude = result.lng
    formData.latitude = result.lat
  }
  
  // 生成显示文本
  if (result.type === 'domestic') {
    // 国内模式：省份 城市 区县
    const parts: string[] = []
    if (result.provinceName) parts.push(result.provinceName)
    if (result.cityName) parts.push(result.cityName)
    if (result.districtName) parts.push(result.districtName)
    selectedRegionText.value = parts.length > 0 ? parts.join(' ') : '未知地 北京时间--'
  } else {
    // 海外模式：国家 地区
    const parts: string[] = []
    if (result.country) parts.push(result.country)
    if (result.region) parts.push(result.region)
    selectedRegionText.value = parts.length > 0 ? parts.join(' ') : '未知地 北京时间--'
  }
}

// 获取年柱天干
const getYearStem = () => {
  return currentBaziData.value?.bazi?.year?.stem || '-'
}

// 获取年柱地支
const getYearBranch = () => {
  return currentBaziData.value?.bazi?.year?.branch || '-'
}

// 获取月柱天干
const getMonthStem = () => {
  return currentBaziData.value?.bazi?.month?.stem || '-'
}

// 获取月柱地支
const getMonthBranch = () => {
  return currentBaziData.value?.bazi?.month?.branch || '-'
}

// 获取日柱天干
const getDayStem = () => {
  return currentBaziData.value?.bazi?.day?.stem || '-'
}

// 获取日柱地支
const getDayBranch = () => {
  return currentBaziData.value?.bazi?.day?.branch || '-'
}

// 获取时柱天干
const getHourStem = () => {
  return currentBaziData.value?.bazi?.hour?.stem || '-'
}

// 获取时柱地支
const getHourBranch = () => {
  return currentBaziData.value?.bazi?.hour?.branch || '-'
}

// 获取公历文字（只显示年月日）
const getGregorianDateOnly = () => {
  const gregorian = currentBaziData.value?.currentTime?.gregorian || '--'
  if (gregorian === '--') return '--'
  // 提取年月日部分，去掉时间
  const match = gregorian.match(/(\d{4}年\d{2}月\d{2}日)/)
  return match ? match[1] : gregorian
}

// 获取农历文字
const getLunarText = () => {
  let lunar = currentBaziData.value?.currentTime?.lunar || '--'
  if (lunar === '--') return '--'
  
  // 去除开头的"农历"二字（label已经显示了）
  lunar = lunar.replace(/^农历/, '')
  
  // 去除重复的"年"和"月"字
  lunar = lunar.replace(/年年/g, '年')
  lunar = lunar.replace(/月月/g, '月')
  
  return lunar
}

// 获取当前时辰
const getCurrentShichen = () => {
  const hour = currentBaziData.value?.bazi?.hour?.branch || '--'
  if (hour === '--') return '时辰'
  return `${hour}时`
}

// 更新时钟显示
const updateTimeDisplay = () => {
  const now = new Date()
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTimeDisplay.value = `${hours}:${minutes}:${seconds}`
}

// 处理即时排盘
const handleInstantChart = () => {
  // 使用当前时间进行即时排盘（与输入框无关）
  const now = new Date()
  const year = now.getFullYear() // 使用当前年份
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const currentDateTime = `${year}-${month}-${day} ${hours}:${minutes}`

  // 跳转到结果页面
  router.push({
    path: '/bazi/result',
    query: {
      datetime: currentDateTime,
      gender: '1',
      name: '即时排盘',
      enableZiShiSupport: 'false'
    }
  })
}

// 表单提交
const onSubmit = async () => {
  if (!formData.datetime) {
    showToast('请选择出生时间')
    return
  }

  loading.value = true

  try {
    // 构建完整的请求数据，包含选择器的完整信息
    const requestData = {
      datetime: formData.datetime,
      gender: formData.gender,
      name: formData.name,
      longitude: formData.longitude,
      latitude: formData.latitude,
      enableZiShiSupport: formData.enableZiShiSupport ?? false,
      // 添加选择器的完整数据
      dateTimeData: selectedDateTimeData.value
    }

    // 跳转到结果页面，通过路由参数传递数据
    const queryParams = {
      datetime: formData.datetime,
      gender: formData.gender.toString(),
      name: formData.name,
      longitude: formData.longitude?.toString(),
      latitude: formData.latitude?.toString(),
      enableZiShiSupport: (formData.enableZiShiSupport ?? false).toString(),
      // 添加选择器数据的字符串化版本
      dateTimeData: selectedDateTimeData.value ? JSON.stringify(selectedDateTimeData.value) : undefined
    }

    // 过滤掉undefined值
    const filteredParams = Object.fromEntries(
      Object.entries(queryParams).filter(([_, value]) => value !== undefined)
    )

    console.log('提交的完整数据:', requestData)
    console.log('路由参数:', filteredParams)

    router.push({
      path: '/bazi/result',
      query: filteredParams
    })
    showToast('排盘成功')
  } catch (error) {
    console.error('排盘失败:', error)
    showToast('排盘失败，请重试')
  } finally {
    loading.value = false
  }
}

// 更新时钟
const updateClock = () => {
  const now = new Date()

  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 组件挂载时获取当前八字
onMounted(() => {
  getCurrentBazi()
  updateClock()
  updateTimeDisplay()
  // 每秒更新时钟和时间显示
  setInterval(() => {
    updateClock()
    updateTimeDisplay()
  }, 1000)
  // 每秒更新当前八字（可选，看是否需要）
  setInterval(getCurrentBazi, 1000)
})
</script>

<style scoped>
.bazi-form {
  min-height: 100vh;
  background: #f8fafc;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  justify-content: flex-start;
}

/* 当前时间八字信息 */
.current-bazi {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.current-bazi:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* 标题区 */
.bazi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.title-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.bazi-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.time-info {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.instant-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.instant-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.instant-btn:active {
  transform: translateY(0);
}

/* 八字内容区 */
.bazi-content {
  padding: 12px 20px 20px 12px;
}

/* 内容行 - 左右布局 */
.content-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* 四柱显示 */
.bazi-pillars {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 23px;
  min-width: 0;
}

.pillar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.pillar-label {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.pillar-chars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pillar-chars .gan {
  font-size: 24px;
  font-weight: 700;
  color: #3b82f6;
  line-height: 1;
}

.pillar-chars .zhi {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

/* 日期信息 */
.date-info {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid #f3f4f6;
  min-width: 110px;
}

.date-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.date-label {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
}

.date-value {
  font-size: 12px;
  color: #374151;
  font-weight: 600;
  white-space: nowrap;
}


/* 表单样式 */
.bazi-form__content {
  flex: 0 0 auto;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.bazi-form__content:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.form-body {
  padding: 20px;
}

.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}

.form-row .form-input {
  flex: 1;
  margin-bottom: 0;
}

.form-row .gender-selector {
  flex-shrink: 0;
  width: 100px;
}

.form-field {
  flex: 1;
  margin-bottom: 16px;
}


.form-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  color: #1f2937;
  background: #ffffff;
  transition: all 0.3s ease;
  font-weight: 500;
}

.form-input:hover {
  border-color: #d1d5db;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input::placeholder {
  color: #9ca3af;
}

.gender-selector {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  height: 44px;
  background: #f9fafb;
}

.gender-btn {
  flex: 1;
  height: 44px;
  border: none;
  border-right: 1px solid #e5e7eb;
  background: transparent;
  color: #6b7280;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-width: 0;
}

.gender-btn:last-child {
  border-right: none;
  border-radius: 0 10px 10px 0;
}

.gender-btn:first-child {
  border-radius: 10px 0 0 10px;
}

.gender-btn:hover {
  background: #ffffff;
  color: #374151;
}

.gender-btn.gender-btn--active {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border-right-color: transparent !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.form-section {
  margin: 12px 0;
  padding: 14px;
  background: #f9fafb;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
}

.switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.switch-info {
  flex: 1;
}


.switch-desc {
  display: block;
  font-size: 12px;
  color: #6b7280;
}

.form-actions {
  margin-top: 16px;
}

.submit-btn {
  width: 100%;
  height: 46px;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  letter-spacing: 0.5px;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}




/* 区域选择器样式 */
.region-selector {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.region-selector:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.region-display {
  font-size: 14px;
  color: #1f2937;
  flex: 1;
  font-weight: 500;
}

.region-arrow {
  font-size: 12px;
  color: #3b82f6;
  transition: transform 0.3s ease;
  font-weight: bold;
}

.region-selector:hover .region-arrow {
  transform: rotate(180deg);
}

/* 日期时间选择器样式 */
.datetime-selector {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.datetime-selector:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.datetime-display {
  font-size: 14px;
  color: #1f2937;
  flex: 1;
  font-weight: 500;
}

.datetime-arrow {
  font-size: 12px;
  color: #3b82f6;
  transition: transform 0.3s ease;
  font-weight: bold;
}

.datetime-selector:hover .datetime-arrow {
  transform: rotate(180deg);
}
</style>